<template>
  <div class="card-content-chart">
    <pie-chart ref="pieConfirmChart"
               :title="'总确诊人数'"
               :id="'pie-confirm-chart'"
    ></pie-chart>
    <pie-chart ref="pieStoreConfirmChart"
               :title="'现存确诊人数'"
               :id="'pie-store-confirm-chart'"
    ></pie-chart>
    <pie-chart ref="pieHealChart"
               :title="'治愈总数'"
               :id="'pie-heal-chart'"
    ></pie-chart>
    <pie-chart ref="pieDeadChart"
               :title="'死亡总数'"
               :id="'pie-dead-chart'"
    ></pie-chart>
    <pie-chart ref="pieInputChart"
               :title="'境外输入数'"
               :id="'pie-input-chart'"
    ></pie-chart>
  </div>
</template>

<script>
import PieChart from "@/components/echart/pieChart";
import {mapState} from "vuex";

export default {
  name: "CardContent",
  components: {PieChart},
  computed: {
    ...mapState(['reports', 'active'])
  },
  mounted() {
    if (this.reports[this.active].allInfo != null) {
      this.$refs.pieConfirmChart.initChart(this.reports[this.active].allInfo.confirmData);
      this.$refs.pieStoreConfirmChart.initChart(this.reports[this.active].allInfo.storeConfirmData);
      this.$refs.pieHealChart.initChart(this.reports[this.active].allInfo.healData);
      this.$refs.pieDeadChart.initChart(this.reports[this.active].allInfo.deadData);
      this.$refs.pieInputChart.initChart(this.reports[this.active].allInfo.inputData);
    }
  },
  watch: {
    '$store.state.active': {
      handler(newV, oldV) {
        if (newV != null && this.reports[newV].allInfo != null) {
          this.$refs.pieConfirmChart.initChart(this.reports[this.active].allInfo.confirmData);
          this.$refs.pieStoreConfirmChart.initChart(this.reports[this.active].allInfo.storeConfirmData);
          this.$refs.pieHealChart.initChart(this.reports[this.active].allInfo.healData);
          this.$refs.pieDeadChart.initChart(this.reports[this.active].allInfo.deadData);
          this.$refs.pieInputChart.initChart(this.reports[this.active].allInfo.inputData);
        }
      }
    }
  }
}
</script>

<style scoped>
.card-content-chart {
  display: flex;
  /*margin: 10px 20px;*/
  gap: 20px;
}
</style>